<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件执行顺序</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper" style="
		width:230px;height:230px ;
		background-color: orange;
		margin-top:50px;margin-left:10px;">
			1.事件执行顺序<br>
			2.区分长按和点击<br>
			3.移动端点击事件不一样
			  touchstart,touchmove,touchend
		</div>
		<script type="text/javascript">
			var wrapper = document.getElementsByClassName("wrapper")[0];
			var box = document.getElementsByClassName("box")[0];
			/* IE是window.event，其他e */
			var firstTiem = 0;
			var lastTiem = 0;
			let key = false;
			wrapper.onclick = function() {
				if (key) {
					console.log("onclick3");
					key = false;
				}
			}
			wrapper.onmousedown = function(e) {
				console.log("onmousedown1");
				firstTiem = new Date().getTime();
			}
			wrapper.onmouseup = function() {
				console.log("onmoseup2");
				lastTiem = new Date().getTime();
				console.log(lastTiem - firstTiem );
				if (lastTiem - firstTiem  < 300) {
					key = true;
				}
			}
		</script>
	</body>
</html>
